import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu, X, Sun, Moon, Leaf } from 'lucide-react';
import { useTheme } from '../context/ThemeContext';
import ThemeSelector from './ThemeSelector';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { isDark, toggleDarkMode } = useTheme();
  const location = useLocation();

  const navigation = [
    { name: '首页', href: '/' },
    { name: '博客', href: '/blog' },
    { name: '笔记', href: '/notes' },
    { name: '关于', href: '/about' }
  ];

  const isActive = (path) => location.pathname === path;

  return (
    <header className="sticky top-0 z-50 glass-effect">
      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-2 group" aria-label="返回首页">
            <div className="p-2 theme-gradient rounded-lg group-hover:scale-105 transition-all duration-300 animate-float">
              <Leaf className="h-6 w-6 text-white icon-spin" />
            </div>
            <span className="text-xl font-bold text-gray-900 dark:text-white hover:theme-color transition-colors duration-300">
              技术博客
            </span>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8" role="navigation" aria-label="主导航">
            {navigation.map((item) => (
              <Link
                key={item.name}
                to={item.href}
                className={`px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:scale-105 ${
                  isActive(item.href)
                    ? 'text-white animate-glow'
                    : 'text-gray-700 dark:text-gray-300 hover:theme-color'
                }`}
                style={isActive(item.href) ? {
                  backgroundColor: 'var(--color-primary)',
                  boxShadow: '0 0 20px rgba(var(--color-primary-rgb, 34, 197, 94), 0.3)'
                } : {}}
              >
                {item.name}
              </Link>
            ))}
            
            {/* Theme Controls */}
            <div className="flex items-center space-x-2">
              <ThemeSelector />
              <button
                onClick={toggleDarkMode}
                className="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 hover:scale-110 icon-spin"
                aria-label="切换明暗模式"
              >
                {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
              </button>
            </div>
          </nav>

          {/* Mobile menu button */}
          <div className="md:hidden flex items-center space-x-2">
            <ThemeSelector />
            <button
              onClick={toggleDarkMode}
              className="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 hover:scale-110"
            >
              {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
            </button>
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 hover:scale-110"
            >
              {isMenuOpen ? <X className="h-6 w-6 icon-spin" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <nav className="md:hidden animate-slide-in-right" role="navigation" aria-label="移动端导航">
            <div className="px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-gray-800 rounded-lg mt-2 shadow-lg border border-gray-200 dark:border-gray-700">
              {navigation.map((item, index) => (
                <Link
                  key={item.name}
                  to={item.href}
                  onClick={() => setIsMenuOpen(false)}
                  className={`block px-3 py-2 rounded-md text-base font-medium transition-all duration-300 hover:scale-105 animate-fade-in-up opacity-0`}
                  style={{
                    animationDelay: `${index * 0.1}s`,
                    animationFillMode: 'forwards',
                    ...(isActive(item.href) ? {
                      backgroundColor: 'var(--color-primary)',
                      color: 'white'
                    } : {
                      color: 'inherit'
                    })
                  }}
                  onMouseEnter={(e) => {
                    if (!isActive(item.href)) {
                      e.target.style.color = 'var(--color-primary)';
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (!isActive(item.href)) {
                      e.target.style.color = 'inherit';
                    }
                  }}
                >
                  {item.name}
                </Link>
              ))}
            </div>
          </nav>
        )}
      </nav>
    </header>
  );
};

export default Header;
